<template>
  <div class="nav-bg" @click="tabClick">
    <div class="nav-bar">
      <div class="flex items-center">
        <img
          src="@/assets/image/tc_logo.png"
          class="logo"
          @click="goPage('/home')"
        />
        <div v-if="click==3" class="place-box" @click="openBindAreaDialog">
          <img
          src="@/assets/image/zglt.png"
          class="logo"
          style="height: 25px;"
        />
        </div>
        <div class="place-box" @click="openBindAreaDialog">
          <svg-icon name="place" size="22px"></svg-icon>
          <p>{{ address || "开福区-其他" }}</p>
        </div>
      </div>

      <div class="user-info">
        <div
          v-if="typeof userAvatar === 'undefined'"
          class="user-avatar"
          @click="zlDialog"
        >
          登录
        </div>
        <el-dropdown v-else>
          <span class="el-dropdown-link">
            <div class="user-avatar">
              <img
                v-if="userAvatar"
                :src="'https://api.touce.com.cn' + userAvatar"
              />
              <img v-else src="@/assets/image/tc_logo_m.png" />

            </div>
            <el-icon class="el-icon--right">
              <ArrowDown />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <template v-for="item in menus" :key="item.name">
                <el-dropdown-item
                  v-if="
                    item.name === 'info' ||
                    item.name === 'care' ||
                    item.name == 'plan'
                  "
                  @click="goPage('/personalCenter', { name: item.name })"
                >
                  {{ item.label }}
                </el-dropdown-item>
              </template>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <div class="nav-list">
          <div style="display:flex;cursor: pointer;" @click="openVip">
            <img style="height:20px;width:20px;z-index: 9999;" src="@/assets/image/vipup.png" />
            <span style="color:#a97737;margin: 0 15px 0 5px">会员升级</span>
          </div>
          <div class="nav-item">
            <el-popover
              popper-style="box-shadow: rgb(14 18 22 / 35%) 0px 10px 38px -10px, rgb(14 18 22 / 20%) 0px 10px 20px -15px; padding: 0px; max-width:1200px; width:auto;"
              trigger="hover"
            >
              <template #reference> 小程序 </template>

              <template #default>
                <div class="add-mini-program">
                  <h2 class="title">扫码添加小程序</h2>
                  <p class="tips">打开微信 <span>扫一扫</span> 立即添加</p>
                  <div class="flex justify-center mt-4">
                    <img src="../../assets/image/qrcode.jpg" style="height:120px;width:120px"/>
                  </div>
                </div>
              </template>
            </el-popover>
            <!-- <svg-icon name="miniProgram" /> -->
          </div>
          <div
            class="nav-item"
            @click="goPage('/personalCenter', { name: 'msg' })"
          >
            <el-badge :value="unRedMsgCount" :max="99" class="item">
              <div class="flex items-center pr-2">
                <img style="height:20px;width:20px;margin-right:5px" src="../../assets/image/msg.png"/>消息
              </div>
            </el-badge>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,onMounted } from "vue";
// import { useUserStore } from "../../store/user"
import { menus } from "../../config";
import { useNavBarHooks } from "./hooks";
import { ArrowDown, Bell } from "@element-plus/icons-vue";
import { zlDialog } from "../../utils/zlDialog";
import { openBindAreaDialog } from "../../utils/bindAreaDialog";
import QrcodeVue from "qrcode.vue";
import router from "../../router";
  // 跳转到VIP界面
  const openVip = () => {
    router.push({ path: "/vipCenter" });
  };
const cascaderEl = ref<any>(null);
// const userStore: any = useUserStore();

const click = ref(0)
const tabClick = () => {
  
  // userStore.click = userStore.click+1
  localStorage.setItem("click", click.value+1)
  click.value = parseInt(localStorage.getItem("click"))
  console.log(click.value,'userStore.click')
  if(click.value>3){
    localStorage.setItem("click", 0)
    click.value = parseInt(localStorage.getItem("click"))
  }
}
onMounted(() =>{
  click.value = parseInt(localStorage.getItem("click"))||0
})
const {
  navList,
  goPage,
  userAvatar,
  address,
  logout,
  createProject,
  areaTree,
  selectConfig,
  addressChange,
  currAreaID,
  cyrrAreaLabel,
  unRedMsgCount
} = useNavBarHooks();
</script>

<style scoped lang="postcss">
.nav-bg {
  @apply bg-white w-full sticky top-0 z-50;
  box-shadow: 0 1px 4px 0px #ccc;
  .nav-bar {
    @apply flex items-center px-8 py-1 justify-between w-2/3 mx-auto;
    .logo {
      width: 120px;
      cursor: pointer;
    }
    .place-box {
      @apply flex items-center ml-4 cursor-pointer;
      line-height: 100%;
    }
    .area-info {
      @apply flex items-center ml-4 cursor-pointer;
    }
    :deep(.el-cascader) {
      @apply w-full;
    }

    .user-info {
      @apply flex justify-end items-center;
      /* width: 120px; */
      .user-avatar {
        @apply flex justify-center items-center rounded-full bg-gray-bg text-center cursor-pointer overflow-hidden;
        width: 40px;
        height: 40px;
        line-height: 40px;
      }

      :deep(.el-dropdown) {
        height: 40px;
        overflow: hidden;
        .el-dropdown-link {
          outline: none;
        }
      }

      .nav-list {
        @apply flex ml-4 items-center;
        .nav-item {
          @apply mr-4 cursor-pointer;
          &:hover {
            @apply text-theme-color;
          }
          &:last-child {
            @apply mr-0;
          }
        }
      }
    }
  }
}

.add-mini-program {
  @apply p-4 text-center;
  .title {
    font-size: 18px;
  }
  .tips {
    @apply my-2;
    span {
      @apply text-theme-color;
    }
  }
}
</style>
